import React, { Component } from 'react';
import './Sortlist.scss'
import { category_list, category_subcate } from '../../utils/api'

class Sortlist extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            arr: []
        }
    }

    componentDidMount() {
        // 一级分类
        category_list().then((res) => {
            this.setState(
                this.state.list = res.data.list
            )
        })
    }

    handleClick(item, index) {
        // 二三级分类
        category_subcate({ id: item.id }).then((res) => {
            this.setState(
                this.state.arr = res.data.subcate.subcategory
            )
        })
    }

    render() {
        return (
            <div className='count'>
                <div className="left">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <span key={index} onClick={() => { this.handleClick(item, index) }}>{item.name}</span>
                            )
                        })
                    }
                </div>
                <div className="right">
                    {
                        this.state.arr.map((item, index) => {
                            return (
                                <div key={index} >
                                    <h3 >{item.name}</h3>
                                    <div className="kar">
                                        {
                                            item.subNavs.map((item, index) => {
                                                return (
                                                    <div className="cart" key={index}>
                                                        <img src={item.pic} alt="" />
                                                        <span>{item.name}</span>
                                                    </div>
                                                )

                                            })
                                        }
                                    </div>
                                </div>

                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Sortlist;